<template>
  <div>
    <CategorySelector :disabled="isShow !== 1" />
    <SpuList v-if="isShow === 1" @setIsShow="setIsShow" @setSpu="setSpu" />
    <SaveOrUpdateSqu v-else-if="isShow === 2" :spu="spu" @setIsShow="setIsShow" />
    <SaveSku v-else :spu="spu" />
  </div>
</template>

<script lang="ts">
export default {
  name: "XSpu",
};
</script>

<script lang="ts" setup>
import SpuList from "./components/SpuList.vue";
import SaveSku from "./components/SaveSku.vue";
import SaveOrUpdateSqu from "./components/SaveOrUpdateSpu.vue";
import CategorySelector from "@/components/CategorySelector/index.vue";
import { useCategoryStore } from "@/stores/category";
import { ref } from "vue";
import type { spuFormDateType } from "@/api/product/model/spuModel";
const categoryStore = useCategoryStore();

enum IsShow {
  "SpuList" = 1,
  "SaveOrUpdateSqu" = 2,
  "SaveSku" = 3,
}

const isShow = ref<IsShow>(1);
const setIsShow = (val: IsShow) => {
  isShow.value = val;
};

// const isShowSpuList=ref(true)
// const setIsShowSpuList=(val:boolean)=>{
//   isShowSpuList.value=val
// }
const spu = ref<spuFormDateType>({
  spuName: "",
  tmId: undefined,
  description: "",
  spuImageList: [],
  spuSaleAttrList: [],
});
const setSpu = (val: spuFormDateType) => {
  spu.value = val;
};
</script>

<style scoped></style>
